<template>
  <div class="module-head" :class="styleName">
    <div class="title">
      <img src="@/assets/images/title-arrow.png" class="arrow" />
      {{ title }}
    </div>
    <slot name="rightCon"></slot>
  </div>
</template>
<script>
export default {
  name: "moduleHead",
  components: {},
  props: {
    title: {
      type: String,
      default: "",
    },
    styleName: {
      type: String,
      default: "",
    },
  },
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {},
};
</script>
<style lang="less" scoped>
// 模块title样式
.module-head {
  // color: @color-primary;
  padding: 0 15px;
  min-height: 40px;
  // background: linear-gradient(to right, #d5e1f8 0%, #fafcfe 100%);
  background: linear-gradient(to right, #0b5fd5 0%, #e6f2ff 100%);
  margin-bottom: 20px;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  font-size: 18px;
  // font-weight: 600;
  // border-bottom: 1px solid #e8e8e8;
  color: #fff;
  .title {
    font-size: 18px;
    display: flex;
    align-items: center;
    // font-weight: 600;
    // &::before {
    //   content: "";
    //   background: url("../../images/title-arrow.png");
    // }
    .arrow {
      height: 20px;
      margin-right: 10px;
    }
  }
  &.touming {
    // color: @color-primary;
    background: transparent;
  }
  &.green {
    // color: @color-success;
    // background: linear-gradient(to right, #43b808 0%, #eeffe6 100%);
    background: linear-gradient(to right, #138a43 0%, #eeffe6 100%);
  }
  &.warning {
    // color: @color-warning;
    // background: linear-gradient(to right, #ca8b0d 0%, #ffeecd 100%);
    background: linear-gradient(to right, #e69d01 0%, #ffeecd 100%);
  }
}
</style>
